<template>
	<widget-root :styles="styles" :class="themeName">
		<view class="user-info flex-col" :style="[infoStyle]">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar :is-back="false" :title="title" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:title-color="percent > 0.5 ? '#000' : '#fff'"></u-navbar>
			</u-sticky>
			<!-- #endif -->
			<view class="user-top flex-1">
				<view class="flex" v-if="isLogin">
					<router-link to="/bundle/pages/user_profile/user_profile">
						<image class="icon-avatar" :src="userInfo.avatar" />
					</router-link>
					<view class="m-l-30 flex-1">
						<view class="xxl white" v-if="userInfo.nickname">
							{{userInfo.nickname}}
						</view>
						<view class="flex user-id m-t-10" v-if="userInfo.sn && content.show_user_sn">
							<view class="xs m-r-20 white">{{$zhTran('会员ID')}}: {{userInfo.sn}}</view>
							<view class="xs m-r-20 copy-btn m-l-5" @tap.stop="$copy(userInfo.sn)">{{$zhTran('复制')}}
							</view>
						</view>
					</view>
				</view>
				<router-link v-else to="/bundle2/pages/login/login">
					<view class="flex white">
						<image class="icon-avatar"
							:src="content.avatar_type==2 && content.avatar ? $getImageUri(content.avatar) : $getImageUri('resource/image/shopapi/uniapp/icon_portrait.png') "
							mode="" />
						<view class="m-l-20 flex-1">
							<view class="xxl">
								{{$zhTran('点击登录')}}
							</view>
							<view class="xs">{{$zhTran('登录体验更多功能')}}</view>
						</view>
					</view>
				</router-link>
				<router-link to="/bundle2/pages/user_multi_switch/list" v-if="userInfo.user_multi_switch"
					class="user-switch flex row-between" :style="{top:switchTop}">
					<text class="m-r-20">{{$zhTran('用户切换')}}</text>
					<u-icon name="arrow-right"></u-icon>
				</router-link>
			</view>
			<view class="assets-nav white flex">
				<router-link class="flex-1" to="/bundle/pages/user_wallet/user_wallet" v-if="showAssets(1)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.user_money || 0}}{{userInfo.user_money_unit || ''}}</view>
						<view>{{$zhTran('余额')}}</view>
					</view>
				</router-link>

				<router-link class="flex-1" to="/bundle/pages/user_sign/user_sign"
					v-if="showAssets(2) && !cloud_shop_enabled">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.user_integral || 0}}{{userInfo.user_integral_unit || ''}}</view>
						<view>{{$zhTran('积分')}}</view>
					</view>
				</router-link>

				<view class="flex-1"
					v-if="showAssets(5) && userInfo.credit_show_way != undefined && userInfo.credit_show_way.indexOf('user_center') > -1 && !cloud_shop_enabled">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.user_credit || 0}}{{userInfo.user_credit_unit || ''}}</view>
						<view>{{$zhTran('额度余额')}}</view>
					</view>
				</view>
				<router-link class="flex-1" to="/bundle/pages/coupon/coupon" v-if="showAssets(3)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.coupon || 0}}</view>
						<view>{{$zhTran('优惠券')}}</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/goods_collects/goods_collects" v-if="showAssets(4)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.collect || 0}}</view>
						<view>{{$zhTran('收藏')}}</view>
					</view>
				</router-link>
			</view>
			<router-link class="flex-1" to="/bundle/pages/user_vip/user_vip"
				v-if="content.show_member && !cloud_shop_enabled">
				<view class="user-grade flex row-between" :style="{
							backgroundImage: `url(${$getImageUri('resource/image/shopapi/uniapp/bg_user_grade.png')})`
						}">
					<view class="sm">
						<span class="lg m-r-12 weight-500" style="font-style: italic;">V <span
								class="xxs">{{userInfo.level_rank || ''}}</span>
						</span>{{isLogin ? (userInfo.level_name || '') : $zhTran('登录查看会员权益')}}
					</view>
					<view>
						<view class="xxs" v-if="userInfo.cert_type == 1">{{$zhTran('认证已通过')}}</view>
						<view class="xxs" v-if="userInfo.cert_type == 3">{{$zhTran('认证待审核')}}</view>
						<view class="xxs" v-if="userInfo.cert_type == 2" @click.native.stop="toCertification"
							style="width:160rpx;padding: 6rpx 0;border: 1rpx solid #ffe0a1;text-align: center;border-radius: 10rpx;">
							{{$zhTran('去认证会员')}}
						</view>
					</view>
					<view class="xs">{{$zhTran('了解会员')}} <u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</router-link>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import themesColor from '@/uni.scss'
	import Cache from "@/utils/cache";
	export default {
		props: {

			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			percent: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: "个人中心"
			}
		},
		data() {
			return {
				cloud_shop_enabled: Cache.get('cloud_shop_enabled')
			}
		},
		methods: {
			toCertification(e) {
				e.preventDefault(); // 阻止事件冒泡穿透
				this.$Router.push({
					path: "/bundle/pages/user_cert/user_cert",
				});
			}
		},
		computed: {
			switchTop() {
				// #ifdef MP-WEIXIN
				return '200rpx';
				// #endif

				// #ifdef H5
				return '120rpx';
				// #endif
			},
			showAssets() {
				return (type) => {
					return this.content.assets.includes(type)
				}
			},
			infoStyle() {
				const {
					background_image,
					background_type
				} = this.content
				const default_color = themesColor[this.themeName],
					minor_color = themesColor[this.themeName + '_minor']

				if (!background_image || background_type == 1) {
					return {
						'background-image': `url('${this.$getImageUri('resource/image/shopapi/uniapp/bg_user.png')}'),linear-gradient(90deg,${default_color} 0%,${minor_color} 100%)`,
					}
				}
				return {
					'background-image': `url(${this.$getImageUri(this.content.background_image)})`,
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-info {
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;
			position: relative;

			// #endif
			.icon-avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 1px solid #f8f8f8;
			}

			.user-id {
				display: inline-flex;
				border: 1px solid #fff;
				border-radius: 100rpx;
				padding-left: 20rpx;

				.copy-btn {
					padding: 3rpx 20rpx;
					border-radius: 20rpx;
					background: #fff;
				}
			}

			.user-switch {
				position: absolute;
				background-color: rgba(255, 35, 59, 1);
				color: #fff;
				padding: 15rpx 10rpx 15rpx 20rpx;
				border-radius: 50rpx 0 0 50rpx;
				right: 0;
				font-size: 24rpx;
			}
		}

		.assets-nav {
			padding: 30rpx 0 20rpx;

			.number {
				font-size: 32rpx;
			}
		}

		.user-grade {
			color: #ffe0a1;
			height: 80rpx;
			background-size: 100%;
			padding: 0 20rpx;
			margin: 0 20rpx;
		}
	}
</style>